
<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
</head>
<body>
<h1 id="demo">demo</h1>
<p>个人博客的demo，以及其他情况下使用到demo  </p>
<h2 id="目录">目录</h2>
<ul>
<li>view，包含功能性的demo。</li>
<li>knowledge，搜集自己能想到的和看到的知识点。</li>
</ul>
<h2 id="使用方法">使用方法</h2>
<h3 id="启动服务，查看demo">启动服务，查看demo</h3>
<p>借助于http-server库，在根目录下启动  </p>
<pre><code>http-server ./  </code></pre><p>访问对应端口即可查看demo。  </p>
<h4 id="独立server">独立server</h4>
<p>文件夹内含package.json的都需要借助npm安装依赖和启动服务，请到对应的文件夹下处理。</p>
<h3 id="重新编译">重新编译</h3>
<pre><code>npm run build</code></pre><h2 id="2019">2019</h2>
<h3 id="07">07</h3>
<ul>
<li><a href="view/2019/07/js%E5%AE%9E%E7%8E%B0%E7%BD%91%E9%A1%B5%E6%91%84%E5%83%8F%E5%A4%B4%E6%88%AA%E5%9B%BE%E5%8A%9F%E8%83%BD/index.html">js实现网页摄像头截图功能</a>，帮助信息查看：<a href="view/2019/07/js%E5%AE%9E%E7%8E%B0%E7%BD%91%E9%A1%B5%E6%91%84%E5%83%8F%E5%A4%B4%E6%88%AA%E5%9B%BE%E5%8A%9F%E8%83%BD/README.md">README.md</a>  </li>
<li><a href="view/2019/07/video%E8%87%AA%E5%8A%A8%E6%92%AD%E6%94%BE%E9%97%AE%E9%A2%98/index.html">video自动播放问题</a>，帮助信息查看：<a href="view/2019/07/video%E8%87%AA%E5%8A%A8%E6%92%AD%E6%94%BE%E9%97%AE%E9%A2%98/README.md">README.md</a>  </li>
<li><a href="view/2019/07/%E5%85%B3%E4%BA%8Epackage.json%E7%9A%84scripts%E5%91%BD%E4%BB%A4%E4%B8%AD%E4%BD%BF%E7%94%A8%E5%8D%95%E5%8F%8C%E5%BC%95%E5%8F%B7%E7%9A%84%E9%97%AE%E9%A2%98/index.html">关于package.json的scripts命令中使用单双引号的问题</a>，帮助信息查看：<a href="view/2019/07/%E5%85%B3%E4%BA%8Epackage.json%E7%9A%84scripts%E5%91%BD%E4%BB%A4%E4%B8%AD%E4%BD%BF%E7%94%A8%E5%8D%95%E5%8F%8C%E5%BC%95%E5%8F%B7%E7%9A%84%E9%97%AE%E9%A2%98/README.md">README.md</a>  </li>
<li><a href="view/2019/07/%E5%85%B3%E4%BA%8Ewe!=we&amp;&amp;we==we%E9%97%AE%E9%A2%98%E8%81%94%E6%83%B3/index.html">关于we!=we&amp;&amp;we==we问题联想</a>，帮助信息查看：<a href="view/2019/07/%E5%85%B3%E4%BA%8Ewe!=we&amp;&amp;we==we%E9%97%AE%E9%A2%98%E8%81%94%E6%83%B3/README.md">README.md</a>  </li>
<li><a href="view/2019/07/%E5%9F%BA%E4%BA%8EMediaRecorder%E5%AE%9E%E7%8E%B0js%E8%8E%B7%E5%8F%96%E6%91%84%E5%83%8F%E5%A4%B4%E5%BD%95%E5%83%8F%E6%95%B0%E6%8D%AE/index.html">基于MediaRecorder实现js获取摄像头录像数据</a>，帮助信息查看：<a href="view/2019/07/%E5%9F%BA%E4%BA%8EMediaRecorder%E5%AE%9E%E7%8E%B0js%E8%8E%B7%E5%8F%96%E6%91%84%E5%83%8F%E5%A4%B4%E5%BD%95%E5%83%8F%E6%95%B0%E6%8D%AE/README.md">README.md</a>  </li>
<li><a href="view/2019/07/%E6%B5%8F%E8%A7%88%E5%99%A8%E6%A0%87%E7%AD%BE%E9%A1%B5%E8%81%9A%E7%84%A6%E5%92%8C%E5%A4%B1%E7%84%A6%E4%BA%8B%E4%BB%B6-visibilitychange/index.html">浏览器标签页聚焦和失焦事件-visibilitychange</a>，帮助信息查看：<a href="view/2019/07/%E6%B5%8F%E8%A7%88%E5%99%A8%E6%A0%87%E7%AD%BE%E9%A1%B5%E8%81%9A%E7%84%A6%E5%92%8C%E5%A4%B1%E7%84%A6%E4%BA%8B%E4%BB%B6-visibilitychange/README.md">README.md</a>  </li>
</ul>
<h3 id="06">06</h3>
<ul>
<li><a href="view/2019/06/background-size%E4%B8%BA100%-100%%E6%97%B6%E8%83%8C%E6%99%AF%E5%9B%BE%E5%A1%AB%E5%85%85%E4%B8%8D%E5%AE%8C%E6%95%B4/index.html">background-size为100%-100%时背景图填充不完整</a>，帮助信息查看：<a href="view/2019/06/background-size%E4%B8%BA100%-100%%E6%97%B6%E8%83%8C%E6%99%AF%E5%9B%BE%E5%A1%AB%E5%85%85%E4%B8%8D%E5%AE%8C%E6%95%B4/README.md">README.md</a>  </li>
<li><a href="view/2019/06/h5%E5%8E%9F%E7%94%9F%E6%8B%96%E6%8B%BD%E4%B8%8D%E8%83%BD%E8%A7%A6%E5%8F%91drop%E4%BA%8B%E4%BB%B6%E9%97%AE%E9%A2%98/index.html">h5原生拖拽不能触发drop事件问题</a>，帮助信息查看：<a href="view/2019/06/h5%E5%8E%9F%E7%94%9F%E6%8B%96%E6%8B%BD%E4%B8%8D%E8%83%BD%E8%A7%A6%E5%8F%91drop%E4%BA%8B%E4%BB%B6%E9%97%AE%E9%A2%98/README.md">README.md</a>  </li>
<li><a href="view/2019/06/react%E4%B8%AD%E4%BD%BF%E7%94%A8redux/index.html">react中使用redux</a>，帮助信息查看：<a href="view/2019/06/react%E4%B8%AD%E4%BD%BF%E7%94%A8redux/README.md">README.md</a>  </li>
<li><a href="view/2019/06/webpack-dev-server%E5%BC%80%E5%90%AFhttps%E8%AE%BF%E9%97%AE">webpack-dev-server开启https访问</a>，帮助信息查看：<a href="view/2019/06/webpack-dev-server%E5%BC%80%E5%90%AFhttps%E8%AE%BF%E9%97%AE/README.md">README.md</a>  </li>
</ul>
<h3 id="05">05</h3>
<ul>
<li><a href="view/2019/05/chrome%E4%B8%8Brem%E5%8D%95%E4%BD%8D%E4%B8%8E12px%E9%97%AE%E9%A2%98/index.html">chrome下rem单位与12px问题</a>，帮助信息查看：<a href="view/2019/05/chrome%E4%B8%8Brem%E5%8D%95%E4%BD%8D%E4%B8%8E12px%E9%97%AE%E9%A2%98/README.md">README.md</a>  </li>
<li><a href="view/2019/05/ES6%E4%B8%AD%E7%9A%84%E5%B0%BE%E9%80%92%E5%BD%92%E4%BC%98%E5%8C%96/index.html">ES6中的尾递归优化</a>，帮助信息查看：<a href="view/2019/05/ES6%E4%B8%AD%E7%9A%84%E5%B0%BE%E9%80%92%E5%BD%92%E4%BC%98%E5%8C%96/README.md">README.md</a>  </li>
<li><a href="view/2019/05/typeof%E6%9C%AA%E5%AE%9A%E4%B9%89%E5%8F%98%E9%87%8F/index.html">typeof未定义变量</a>，帮助信息查看：<a href="view/2019/05/typeof%E6%9C%AA%E5%AE%9A%E4%B9%89%E5%8F%98%E9%87%8F/README.md">README.md</a>  </li>
<li><a href="view/2019/05/typescript%E7%89%88node%E7%8E%AF%E5%A2%83%E6%90%AD%E5%BB%BA">typescript版node环境搭建</a>，帮助信息查看：<a href="view/2019/05/typescript%E7%89%88node%E7%8E%AF%E5%A2%83%E6%90%AD%E5%BB%BA/README.md">README.md</a>  </li>
</ul>
<h3 id="04">04</h3>
<ul>
<li><a href="view/2019/04/js%E4%B8%ADarraybuffer%E4%B8%8Eblob%E7%9A%84%E5%8C%BA%E5%88%AB/index.html">js中arraybuffer与blob的区别</a>，帮助信息查看：<a href="view/2019/04/js%E4%B8%ADarraybuffer%E4%B8%8Eblob%E7%9A%84%E5%8C%BA%E5%88%AB/README.md">README.md</a>  </li>
<li><a href="view/2019/04/js%E5%AE%9E%E7%8E%B0pcm%E6%95%B0%E6%8D%AE%E7%BC%96%E7%A0%81/index.html">js实现pcm数据编码</a>，帮助信息查看：<a href="view/2019/04/js%E5%AE%9E%E7%8E%B0pcm%E6%95%B0%E6%8D%AE%E7%BC%96%E7%A0%81/README.md">README.md</a>  </li>
<li><a href="view/2019/04/js%E5%AE%9E%E7%8E%B0pcm%E9%9F%B3%E9%A2%91%E8%BD%ACwav%E4%B8%8E%E6%92%AD%E6%94%BE/index.html">js实现pcm音频转wav与播放</a>，帮助信息查看：<a href="view/2019/04/js%E5%AE%9E%E7%8E%B0pcm%E9%9F%B3%E9%A2%91%E8%BD%ACwav%E4%B8%8E%E6%92%AD%E6%94%BE/README.md">README.md</a>  </li>
<li><a href="view/2019/04/webAudio%E5%88%B6%E9%80%A0%E5%99%AA%E9%9F%B3%E5%B9%B6%E6%92%AD%E6%94%BE/index.html">webAudio制造噪音并播放</a>，帮助信息查看：<a href="view/2019/04/webAudio%E5%88%B6%E9%80%A0%E5%99%AA%E9%9F%B3%E5%B9%B6%E6%92%AD%E6%94%BE/README.md">README.md</a>  </li>
<li><a href="view/2019/04/webAudio%E5%AE%9E%E7%8E%B0pcm%E9%9F%B3%E9%A2%91%E6%95%B0%E6%8D%AE%E6%94%B6%E9%9B%86/index.html">webAudio实现pcm音频数据收集</a>，帮助信息查看：<a href="view/2019/04/webAudio%E5%AE%9E%E7%8E%B0pcm%E9%9F%B3%E9%A2%91%E6%95%B0%E6%8D%AE%E6%94%B6%E9%9B%86/README.md">README.md</a>  </li>
<li><a href="view/2019/04/webAudio%E6%92%AD%E6%94%BE%E6%9C%AC%E5%9C%B0%E9%9F%B3%E4%B9%90/index.html">webAudio播放本地音乐</a>，帮助信息查看：<a href="view/2019/04/webAudio%E6%92%AD%E6%94%BE%E6%9C%AC%E5%9C%B0%E9%9F%B3%E4%B9%90/README.md">README.md</a>  </li>
<li><a href="view/2019/04/webpack%E6%89%93%E5%8C%85typescript%E5%A4%9A%E6%96%87%E4%BB%B6%EF%BC%8C%E6%8F%90%E7%A4%BA%E6%B2%A1%E6%9C%89%E8%AF%A5%E6%96%87%E4%BB%B6">webpack打包typescript多文件，提示没有该文件</a>，帮助信息查看：<a href="view/2019/04/webpack%E6%89%93%E5%8C%85typescript%E5%A4%9A%E6%96%87%E4%BB%B6%EF%BC%8C%E6%8F%90%E7%A4%BA%E6%B2%A1%E6%9C%89%E8%AF%A5%E6%96%87%E4%BB%B6/README.md">README.md</a>  </li>
<li><a href="view/2019/04/webpack%E6%89%93%E5%8C%85%E6%96%87%E4%BB%B6%E5%90%8C%E6%97%B6%E6%94%AF%E6%8C%81script%E5%BC%95%E5%85%A5%E5%92%8Cnpm%E5%AE%89%E8%A3%85">webpack打包文件同时支持script引入和npm安装</a>，帮助信息查看：<a href="view/2019/04/webpack%E6%89%93%E5%8C%85%E6%96%87%E4%BB%B6%E5%90%8C%E6%97%B6%E6%94%AF%E6%8C%81script%E5%BC%95%E5%85%A5%E5%92%8Cnpm%E5%AE%89%E8%A3%85/README.md">README.md</a>  </li>
<li><a href="view/2019/04/webpack%E6%94%AF%E6%8C%81%E5%90%AF%E5%8A%A8dev%E6%9C%8D%E5%8A%A1%E5%92%8C%E7%83%AD%E6%9B%B4%E6%96%B0%EF%BC%8C%E5%B9%B6%E6%94%AF%E6%8C%81%E6%89%93%E5%8C%85%E6%97%B6%E5%A2%9E%E5%8A%A0%E6%96%87%E4%BB%B6%E6%B3%A8%E9%87%8A">webpack支持启动dev服务和热更新，并支持打包时增加文件注释</a>，帮助信息查看：<a href="view/2019/04/webpack%E6%94%AF%E6%8C%81%E5%90%AF%E5%8A%A8dev%E6%9C%8D%E5%8A%A1%E5%92%8C%E7%83%AD%E6%9B%B4%E6%96%B0%EF%BC%8C%E5%B9%B6%E6%94%AF%E6%8C%81%E6%89%93%E5%8C%85%E6%97%B6%E5%A2%9E%E5%8A%A0%E6%96%87%E4%BB%B6%E6%B3%A8%E9%87%8A/README.md">README.md</a>  </li>
<li><a href="view/2019/04/%E5%85%B3%E4%BA%8Ejs%E4%B8%ADsetTimeout%E5%92%8CsetInterval%E7%9A%84%E5%AE%9A%E6%97%B6%E4%B8%8A%E9%99%90%E5%80%BC/index.html">关于js中setTimeout和setInterval的定时上限值</a>，帮助信息查看：<a href="view/2019/04/%E5%85%B3%E4%BA%8Ejs%E4%B8%ADsetTimeout%E5%92%8CsetInterval%E7%9A%84%E5%AE%9A%E6%97%B6%E4%B8%8A%E9%99%90%E5%80%BC/README.md">README.md</a>  </li>
</ul>
<h3 id="03">03</h3>
<ul>
<li><a href="view/2019/03/await%E4%B8%8EforEach/index.html">await与forEach</a>，帮助信息查看：<a href="view/2019/03/await%E4%B8%8EforEach/README.md">README.md</a>  </li>
<li><a href="view/2019/03/koa-unless%E5%A2%9E%E5%8A%A0method%E9%99%90%E5%88%B6/index.html">koa-unless增加method限制</a>，帮助信息查看：<a href="view/2019/03/koa-unless%E5%A2%9E%E5%8A%A0method%E9%99%90%E5%88%B6/README.md">README.md</a>  </li>
<li><a href="view/2019/03/wordpress%E7%AE%80%E5%8D%95%E6%8F%92%E4%BB%B6%E5%BC%80%E5%8F%91/index.html">wordpress简单插件开发</a>，帮助信息查看：<a href="view/2019/03/wordpress%E7%AE%80%E5%8D%95%E6%8F%92%E4%BB%B6%E5%BC%80%E5%8F%91/README.md">README.md</a>  </li>
<li><a href="view/2019/03/%E5%89%8D%E7%AB%AF%E8%B7%AF%E7%94%B1%E5%8E%9F%E7%90%86-hash/index.html">前端路由原理-hash</a>，帮助信息查看：<a href="view/2019/03/%E5%89%8D%E7%AB%AF%E8%B7%AF%E7%94%B1%E5%8E%9F%E7%90%86-hash/README.md">README.md</a>  </li>
<li><a href="view/2019/03/%E5%89%8D%E7%AB%AF%E8%B7%AF%E7%94%B1%E5%8E%9F%E7%90%86-history/index.html">前端路由原理-history</a>，帮助信息查看：<a href="view/2019/03/%E5%89%8D%E7%AB%AF%E8%B7%AF%E7%94%B1%E5%8E%9F%E7%90%86-history/README.md">README.md</a>  </li>
<li><a href="view/2019/03/%E5%9F%BA%E4%BA%8Enode%E5%AE%9E%E7%8E%B0websocket%E9%80%9A%E4%BF%A1">基于node实现websocket通信</a>，帮助信息查看：<a href="view/2019/03/%E5%9F%BA%E4%BA%8Enode%E5%AE%9E%E7%8E%B0websocket%E9%80%9A%E4%BF%A1/README.md">README.md</a>  </li>
</ul>
<h3 id="02">02</h3>
<ul>
<li><a href="view/2019/02/react%E4%B8%ADonFocus%E4%BA%8B%E4%BB%B6">react中onFocus事件</a>，帮助信息查看：<a href="view/2019/02/react%E4%B8%ADonFocus%E4%BA%8B%E4%BB%B6/README.md">README.md</a>  </li>
<li><a href="view/2019/02/%E5%9F%BA%E4%BA%8Enode%E7%AE%80%E5%8D%95%E5%AE%9E%E7%8E%B0RSA%E5%8A%A0%E8%A7%A3%E5%AF%86">基于node简单实现RSA加解密</a>，帮助信息查看：<a href="view/2019/02/%E5%9F%BA%E4%BA%8Enode%E7%AE%80%E5%8D%95%E5%AE%9E%E7%8E%B0RSA%E5%8A%A0%E8%A7%A3%E5%AF%86/README.md">README.md</a>  </li>
</ul>
<h3 id="01">01</h3>
<ul>
<li><a href="view/2019/01/%E5%9F%BA%E4%BA%8E%E9%98%BF%E9%87%8C%E4%BA%91%E5%AE%9E%E7%8E%B0%E7%AE%80%E5%8D%95%E7%9A%84%E8%AF%AD%E9%9F%B3%E8%AF%86%E5%88%AB%E5%8A%9F%E8%83%BD(node)">基于阿里云实现简单的语音识别功能(node)</a>，帮助信息查看：<a href="view/2019/01/%E5%9F%BA%E4%BA%8E%E9%98%BF%E9%87%8C%E4%BA%91%E5%AE%9E%E7%8E%B0%E7%AE%80%E5%8D%95%E7%9A%84%E8%AF%AD%E9%9F%B3%E8%AF%86%E5%88%AB%E5%8A%9F%E8%83%BD(node)/README.md">README.md</a>  </li>
</ul>
<h3 id="00">00</h3>
<ul>
<li><a href="view/2019/00/element-ui%E6%BA%90%E7%A0%81%E5%AD%A6%E4%B9%A0/index.html">element-ui源码学习</a>，帮助信息查看：<a href="view/2019/00/element-ui%E6%BA%90%E7%A0%81%E5%AD%A6%E4%B9%A0/README.md">README.md</a>  </li>
<li><a href="view/2019/00/js%E5%AF%BC%E5%87%BAexcel-csv/index.html">js导出excel-csv</a>，帮助信息查看：<a href="view/2019/00/js%E5%AF%BC%E5%87%BAexcel-csv/README.md">README.md</a>  </li>
<li><a href="view/2019/00/js%E5%AF%BC%E5%87%BAexcel-xml/index.html">js导出excel-xml</a>，帮助信息查看：<a href="view/2019/00/js%E5%AF%BC%E5%87%BAexcel-xml/README.md">README.md</a>  </li>
</ul>
<h2 id="2018">2018</h2>
<h3 id="12">12</h3>
<ul>
<li><a href="view/2018/12/innerText%E5%80%BC%E5%A4%9A%E7%A9%BA%E6%A0%BC%E7%9A%84%E9%97%AE%E9%A2%98/index.html">innerText值多空格的问题</a>，帮助信息查看：<a href="view/2018/12/innerText%E5%80%BC%E5%A4%9A%E7%A9%BA%E6%A0%BC%E7%9A%84%E9%97%AE%E9%A2%98/README.md">README.md</a>  </li>
</ul>
<h2 id="2017">2017</h2>
<h3 id="06-1">06</h3>
<ul>
<li><a href="view/2017/06/tabindex%E5%B1%9E%E6%80%A7%E5%8F%8A%E7%89%B9%E6%AE%8A%E7%94%A8%E6%B3%95/index.html">tabindex属性及特殊用法</a>，帮助信息查看：<a href="view/2017/06/tabindex%E5%B1%9E%E6%80%A7%E5%8F%8A%E7%89%B9%E6%AE%8A%E7%94%A8%E6%B3%95/README.md">README.md</a>  </li>
</ul>

</body>
</html>